<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>青灯全栈-注册</title>
    <link rel="stylesheet" href="/static/layui/css/layui.css">
    <link rel="stylesheet" href="/static/css/admin.css">
    <style>
        .send_sms {
            margin-left: 20px;
            color: #59b7a7;
        }
    </style>
</head>
<body>

<form class="layui-form" action="javascript:void(0);">
    <div class="layui-form-item">
        <img class="logo" src="/static/images/admin/logo.png"/>
        <div class="title">青 灯 论 坛</div>
        <div class="desc">
            青 灯 教 育 全 栈 教 学 项 目 后 台 -- 注 册
        </div>
    </div>
    <div class="layui-form-item">
        <input name="nickname" type="text" lay-verify="required" placeholder="账 户:" value="" hover class="layui-input"
               autocomplete="off"/>
    </div>
    <div class="layui-form-item">
        <input name="password" type="password" lay-verify="required" placeholder="密 码 :" value="" hover
               class="layui-input"/>
    </div>
    <div class="layui-form-item">
        <input placeholder="验证码 : " name="captcha" lay-verify="required"
               hover class="code layui-input layui-input-inline"/>
        <img src="/static/images/admin/getCaptcha.png" class="codeImage" id="captchaImage"/>
    </div>
    <div class="layui-form-item">
        <input name="mobile" type="text" lay-verify="required" placeholder="手机号:" value="" hover
               class="code layui-input layui-input-inline"
               autocomplete="off"/>
        <!--点击发送短信-->
        <div class="layui-form-mid layui-word-aux"><a href="javascript:;" class="send_sms">点击获取验证码</a>
        </div>
    </div>
    <div class="layui-form-item">
        <input name="mobile_code" type="text" lay-verify="required" placeholder="短信验证码:" value=""
               hover class="layui-input" autocomplete="off"/>
    </div>

    <div class="layui-form-item">
        <button class="layui-btn" lay-submit lay-filter="register">
            注 册
        </button>
    </div>
    <div class="layui-form-item">
        <div class="layui-form-mid layui-word-aux">
            已有账号？ <a href="/login" style="color: #59b7a7;">登录</a>
        </div>
    </div>
</form>

<script src="/static/layui/layui.js"></script>
<script>
  let captcha_code_uuid = null;

  function generateUUID() {
    var d = new Date().getTime();
    if (window.performance && typeof window.performance.now === 'function') {
      d += performance.now(); //use high-precision timer if available
    }
    var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g,
        function(c) {
          var r = (d + Math.random() * 16) % 16 | 0;
          d = Math.floor(d / 16);
          return (c == 'x' ? r : (r & 0x3 | 0x8)).toString(16);
        });
    return uuid;
  }

  function generateChapter() {
    captcha_code_uuid = generateUUID();
    document.getElementById('captchaImage').src = '/get_captcha?captcha_code_uuid=' + captcha_code_uuid;
  }

  layui.use(['form', 'layer', 'jquery'], function() {
    let $ = layui.jquery;
    let form = layui.form
    generateChapter();
    $('#captchaImage').click(function() {
      generateChapter();
    });
    $('.send_sms').click(function() {
      // {#发送收集短信#}
      console.log('请求发送短信');
      {#console.log('captcha_code_uuid', captcha_code_uuid);#}
      let data = {
        captcha_code: $('[name="captcha"]').val(),
        captcha_code_uuid: captcha_code_uuid,
        mobile: $('[name="mobile"]').val(),
      };
      const options = {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(data),
      };

      fetch('/sms_code', options).then(function(response) {
        return response.json();
      }).then(function(result) {
        // {#console.log(result);#}
        if (result.status === 'fail') {
          // {#代表发送失败#}
          layer.msg(result.message);
        } else {
          layer.msg(result.message);
          // {#代表发送成功#}
          var num = 60;
          var t = setInterval(function() {
            // {#代表倒计时结束#}
            if (num === 1) {
              // {#清除倒计时#}
              clearInterval(t);
              // {#设置显示内容#}
              $('.send_sms').html('点击获取验证码');
              // {#添加点击事件#}
              // $('.send_sms').attr('onclick', 'sendSMSCode();');
            } else {
              num -= 1;
              // {#设置 a 标签显示的内容#}
              $('.send_sms').html(num + '秒');
            }
          }, 1000);
        }
      });
    });

    async function register(data) {
      const options = {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(data),
      };
      const response = await fetch('/register', options);
      return await response.json();
    }

    // 监听登录表单的提交事件
    form.on('submit(register)', async function(data) {
      const result = await register(data.field);
      if (result.status === 'success') {
        layui.layer.msg(result.message);
        setInterval(function() {window.location.href = '/login';},2000)
      } else {
        layui.layer.msg(result.message);
        generateChapter();
      }
      return false;
    });
  });
</script>
{#<script src="/static/js/main.js"></script>#}
{#<script src="/static/js/bbs/register.js"></script>#}
</body>
</html>
